<template>

	<view class="content" :style="{'--color':color,'--color_val':colorVal}">
		<view class="contentBox p-re" :style="{height:contentBox+'px'}">
			<view class="rows bgwhite">
				<view class="rows bgwhite">
					<view class="rows" :style="{height:System.statusBarHeight+'px'}"></view>
					<view class="row a-center" :style="{width:`${navWidth}px`,height:`${navHeight}px`}">
						<text class="size32 black bold p-left30">{{tabTitle}}</text>
						<view class="Search d-flex a-center m-left20" @click="toUrl(`searchMode`)">
							<view class="iconfont icon-btn_search color_b7 size32"></view>
							<text class="h6 color_b7 m-left10">请输入搜索</text>
						</view>
					</view>
				</view>

				<view class="viewbox auto d-flex j-sb a-center position ">
					<view class="flex-1 d-flex f-column m-right20" v-if="way == 0">
						<text class="size30 black bold400">{{storeInfo.name}}</text>
						<text class="color_66 h6 m-top10 ellipsis">{{storeInfo.address}}</text>
					</view>
					<view class="d-flex f-column flex-1 m-right30" v-if="way == 1"
						@click="toUrl(`/orderPage/Addresslist/Addresslist`)">
						<text class="size30 black bold400 ellipsis">{{Address.Aregion}}{{Address.Aaddress}}</text>
						<view class="d-flex a-center color_66 h6 m-top10">
							<text class="m-right10">{{$pop.hidePhone(Address.Amobile)}}</text>
							<text>{{Address.Aname}}</text>
						</view>
					</view>
					<view class="way d-flex">
						<view class="flex-1 flexac wayList" :class="{'active':way == index}" @click="switchMode(index)"
							v-for="(item,index) in wayList" :key="index" v-if="item">{{item}}</view>
					</view>
				</view>
			</view>


			<view class="scrollView d-flex" :style="{height:scrollView+'px'}">
				<scroll-view scroll-y="true" :scroll-into-view="`Left${LeftIndex}`" scroll-with-animation class="Left height">
					<view class="leftList" :id="`Left${index}`" :class="{'navActive':LeftIndex == index}"
						@click="navTab(index)" v-for="(item,index) in pageData" :key="index">{{item.classify_name}}
					</view>
				</scroll-view>
				<scroll-view scroll-y="true" class="flex-1 height RightScrill m-left10 m-right20"
					 @scroll="Rightscroll" :scroll-top="scrollTop">
					<view class="RightData" :id="`Right${index}`" v-for="(item,index) in pageData" :key="index">
						<image :src="$imgUrls(item.classify_atlas)" mode="widthFix" class="Right_Top_bg" v-if="item.classify_atlas"></image>
						<view class="rows padding20">
							<view class="d-flex f-column">
								<text class="size30 bold color_33">{{item.classify_name}}</text>
								<text class="color_99 h7 ">{{item.classify_info}}</text>
							</view>
						</view>
						<view class="rows padding10-20" v-if="item.goods">
							<view class="list" v-for="(subItem,subIndex) in item.goods" :key="subIndex"
								@click="toDetails(subItem)">
								<image :src="$imgUrls(subItem.img)" mode="aspectFill" class="shop_img"></image>
								<view class="flex-1 d-flex f-column   m-left10">
									<text class="size28 color_33 bold">{{subItem.name}}</text>
									<text class="color_99 h7 ellipsis m-top10">{{subItem.info}}</text>
									<view class="row j-sb m-top10">
										<view class="d-flex a-center">
											<text class="color_E9 h6 bold">￥{{subItem.price}}</text>
											<text
												class="color_99 h6 bold line-through m-left10">￥{{subItem.full_price}}</text>
										</view>
										<view class="addNums p-re" >
										   <view class="iconfont icon-zengjia size36"></view>
										   <view class="currentNum flexac" v-if="subItem.carNum > 0">
											   <view class="cemterBg flexac"> <text class="centerNums">{{subItem.goodsNum}}</text> </view>
										   </view>
										</view>
									</view>
								</view>

							</view>

						</view>
					</view>



					<view class="rows botBox" v-if="pageData.length">我是有底线的~</view>
				</scroll-view>
			</view>

			<view class="CartView" v-if="cartList.length">
				<view class="CartIcon p-re" @click.stop="showCartList = !showCartList">
					<view class="iconfont icon-gouwuche color_66 size50"></view>
					<view class="Cartnum"><text class="h7 white cartNum">{{allNum}}</text></view>
				</view>
				<view class="d-flex f-column m-left40">
					<text class="size28 bold400 color_33">合计:</text>
					<view class="d-flex a-center color_E9">
						<text class="h7">￥</text>
						<text class="size28 bold400">{{allPrice}}</text>
					</view>
				</view>
				<view class="Settle j-self-end flexac" :class="settFlag?'Settleyes':'Settleno'" @click="settlement">去结算</view>
			</view>



			<view class="Controls d-flex a-end" v-if="showCartList && cartList.length" @click.stop="showCartList = false">
				<view class="ControView" @click.stop>
					<view class="row j-sb padding20-30 a-center bot">
						<view class="d-flex a-center">
							<view class="dot flexac" :class="{'dotActive':selectall}" @click.stop="Cannelall">
								<view class="iconfont icon-xuanzhong white size26"></view>
							</view>
							<text class="color_33 h6 m-left20">已选购商品({{allNum}}件)</text>
						</view>
						<view class="d-flex a-center" @click.stop="ClearCart">
							<view class="iconfont icon-shanchu2 color_99 h7"></view>
							<text class="color_99 h7 m-left10">清空购物车</text>
						</view>
					</view>
					<view class="swipe-action">
						<uni-swipe-action>
							<block v-for="(item,index) in cartList" :key="index">
								<uni-swipe-action-item :right-options="rightoptions" @click="actionitem($event,item)">
									<view class="rows shopBOX padding20-30" @click.stop="toDetails(item)">
										<view class="row a-center">
											<view class="p-right30">
												<view class="dot flexac" :class="{'dotActive':item.isFlag}"
													@click.stop="isSelect(item.car_id)">
													<view class="iconfont icon-xuanzhong white size26"></view>
												</view>
											</view>
											<view class="flex-1 d-flex">
												<image :src="$imgUrls(item.goodsImg)" mode="aspectFill"
													class="shop_img f-shrink-0">
												</image>
												<view class="rows d-flex f-column m-left20">
													<text class="color_33 size28 ellipsis">{{item.goods_name}}</text>
													<text class="color_99 h7 ellipsis">{{item.operation_text}}</text>
													<view class="row j-sb a-center m-top14">
														<view class="d-flex a-center">
															<view class="d-flex a-center color_E9 bold400">
																<text class="h7">￥</text>
																<text class="size28">{{item.price}}</text>
															</view>
															<text
																class="color_66 h6 line-through bold400 m-left10">￥{{item.goodsOneOldPrice}}</text>
														</view>
														<view class="d-flex a-center">
															<view class="iconfont icon-jianshao1 size34 color_ff4" 
																@click.stop="subBtn(item.car_id)"></view>
															<view class="CatNumber">{{item.num}}</view>
															<view class="iconfont icon-zengjia size34 color_ff4" 
																@click.stop="addBtn(item.car_id)"></view>
														</view>
													</view>

												</view>
											</view>
										</view>

									</view>
								</uni-swipe-action-item>
							</block>
						</uni-swipe-action>
					</view>
				</view>
			</view>
		</view>
		<tabBar :tab="4"></tabBar>
		<showModel @cancelFunc='showModal=false' v-if='showModal' type='2'></showModel>
	</view>

</template>

<script>
	import {
		mapState
	} from 'vuex';
	export default {
		data() {
			return {
				rightoptions: [{
					text: '删除',
					style: {
						backgroundColor: '#f56c6c'
					}
				}],
				contentBox: 0,
				scrollView: 0,
				showModal: false,
				way: 0, // 0 自提 1外送
				// wayList: ['自提', '外送'],
				storeInfo: '',
				Address: '',
				LeftIndex: 0,
				scrollintoview: '',
				scrollTop:0,
				showCartList: false,
				cartList: [],
				pageData: [],
				// way：当前激活元素的下标，delivery：决定显示几项
				delivery: uni.getStorageSync('startUp').delivery
			}
		},
		onLoad(option) {
			this.$pop.getLocation();
			if(option.way) this.way = option.way;
			if(this.delivery == 1) this.way = 1
			if(this.delivery == 2) this.way = 0
			const botHeight = this.System.screenHeight - this.System.safeArea.bottom;
			const tabbar = uni.upx2px(100);
			this.contentBox = this.System.screenHeight - botHeight - tabbar;
			const postion = uni.upx2px(120);
			const topHeight = postion + this.totalHeight;
			const Mtop = uni.upx2px(20);
			this.scrollView = this.contentBox - postion - this.totalHeight - Mtop;
			this.$showLoading('');
			// 优先显示缓存
			const result = uni.getStorageSync('repastData')
			if(result){
				this.pageData = result
				this.$hideLoading()
			}
		},
		onShow() {
			this.topCategory();
			this.getCart();
			this.getOldAddress();
		},
		methods: {
			topCategory() {
				this.$http.post({
					url: '/singleSaleApi/allUpList',
					data: {
						mode: 1
					}
				}).then(res => {
					if (res.errcode != 100) return this.$Toast(res.msg);
					const result = res.data || [];
					this.pageData = result;
					uni.setStorageSync('repastData', this.pageData)
					if (res.storeInfo) this.storeInfo = res.storeInfo;
					setTimeout(() => {
						let OneTop = 0;
						this.pageData.forEach((item, index) => {
							this.getViewInfo(`#Right${index}`).then(data => {
								if (!data) return;
								if (data.id == 'Right0') OneTop = data.top;
								item.Top = parseInt(data.top) - OneTop;
							})
						})
						this.$hideLoading();
					}, 1000)
				})
			},
			getCart() {
				this.$http.post({
					url: '/zzj_singleSaleApi/cartList'
				}).then(res => {
					if (res.errcode != 100) return this.$Toast(res.msg);
					const result = res.data || [];
					result.forEach((item, index) => {
						item.isFlag = true;
					})
					this.cartList = result;
				})
			},


			getOldAddress() {
				this.$http.post({
					url: '/SRA_simMallApi/getOldAddress',
					data: {
						type: 3
					}
				}).then(res => {
					if (res.code != 100) return this.$Toast(res.msg);
					const result = res.data;
					this.Address = result;
					if(!result.Aaddress && this.way){
						this.toUrl('/orderPage/Addresslist/Addresslist');
						this.way = 0
					}
				})
			},


			navTab(index) {
				this.LeftIndex = index;
				this.scrollTop = this.pageData[index].Top;
				// this.scrollintoview = `Right${index}`
			},


			switchMode(index) {
				if (!this.vid) return this.showModal = true;
				if (index == 1 && !this.Address.Aaddress) return this.toUrl(`/orderPage/Addresslist/Addresslist`);
				this.way = index;
			},


			Rightscroll(e) {
				const scrollTop = e.detail.scrollTop;
				for (let i = 0; i < this.pageData.length; i++) {
					if (scrollTop >= this.pageData[i].Top) {
						this.LeftIndex = i;
					}
				}
			},


			toDetails(item) {
				this.toUrl(`/pages/goods/goods_detail?goods_id=${item.goods_id}&mode=1`);
			},

			getViewInfo(selector) {
				const query = uni.createSelectorQuery().in(this);
				return new Promise((resolve) => {
					query.select(selector).boundingClientRect(data => {
						resolve(data)
					}).exec();
				})
			},


			Cannelall() {
				if (this.selectall) {
					this.cartList.forEach((item, index) => {
						item.isFlag = false;
					})
				} else {
					this.cartList.forEach((item, index) => {
						item.isFlag = true;
					})
				}
			},

			isSelect(car_id) {
				const index = this.cartList.findIndex((n) => n.car_id == car_id);
				this.cartList[index].isFlag = !this.cartList[index].isFlag
			},

			subBtn(car_id){
				const index = this.cartList.findIndex((n) => n.car_id == car_id);
				if(this.cartList[index].num > 1){
					this.cartList[index].num--
					this.incCart(car_id,this.cartList[index].num);
					return;
				} 
				this.$Modal('提示','确定不要了吗？').then(res=>{
					if(!res) return;
					this.$http.post({
						url:'/zzj_singleSaleApi/delCart',
						data:{
							car_id
						}
					}).then(res1=>{
						if(res1.errcode != 100) return this.$Toast(res.msg);
						this.cartList.splice(index,1)
						this.topCategory()
					})
				})
			},
			addBtn(car_id){
				const index = this.cartList.findIndex((n) => n.car_id == car_id);
				this.cartList[index].num++;
				this.incCart(car_id,this.cartList[index].num);
			},
			
			incCart(car_id,num){
				this.$http.post({
					url:'/zzj_singleSaleApi/incCart',
					data:{
						car_id,
						num
					}
				}).then(res=>{
					if(res.errcode != 100) return this.$Toast(res.msg);
					this.topCategory()
				})
			},
			
			
			actionitem(e, item) {
				this.$Modal('提示','确定不要了吗？').then(res=>{
					if(!res) return;
					this.$http.post({
						url:'/zzj_singleSaleApi/delCart',
						data:{
							car_id:item.car_id
						}
					}).then(res=>{
						if(res.errcode != 100) return this.$Toast(res.msg);
						const index = this.cartList.findIndex((n) => n.car_id == item.car_id);
						this.cartList.splice(index,1)
						this.topCategory()
					})
				})
			},
			
			ClearCart(){
				if(!this.vid) return this.showModal = true;
				this.$Modal('提示','确定不要了吗？').then(res=>{
					if(!res) return;
					this.$http.post({
						url:'/zzj_singleSaleApi/emptyMyCart',
					}).then(res=>{
						if(res.errcode != 100) return this.$Toast(res.msg);
						this.getCart();
						this.topCategory()
					})
				})
				
			},
			
			settlement(){
				if(!this.vid) return this.showModal = true;
				if(!this.settFlag) return;
				let car_ids = [];
				this.cartList.forEach((item,index)=>{
					if(item.isFlag) car_ids.push(item.car_id)
				})
				if(!car_ids.length) return;
				this.toUrl(`/orderPage/order/createOrder?car_id=${car_ids.join()}`)
			}

		},

		computed: {
			...mapState(['vid','share', 'tabTitle', 'totalHeight', 'System', 'navWidth', 'navHeight','color','colorVal']),

			wayList(){
				if(this.delivery == 1) return ['', '外送']
				if(this.delivery == 2) return ['自提', '']
				return ['自提', '外送']
			},

			allPrice() {
				let price = 0;
				this.cartList.forEach((item, index) => {
					if (item.isFlag) {
						price += item.price * item.num;
					}
				})
				return price.toFixed(2);
			},

			allNum() {
				let num = 0;
				this.cartList.forEach((item, index) => {
					if (item.isFlag) {
						num+=parseInt(item.num);
					}
				})
				return num;
			},
			selectall() {
				let num = 0;
				this.cartList.forEach((item, index) => {
					if (item.isFlag) {
						num++;
					}
				})
				return this.cartList.length == num;
			},
			
			settFlag(){
				let num = 0;
				this.cartList.forEach((item, index) => {
					if (item.isFlag) num++;
				})
				return num > 0;
			}
		},
		onShareAppMessage(res) {
			let share = this.share;
			return {
				title: share.title,
				desc: share.desc,
				path: `/pages/index/index?share_v_id=${this.vid}&pageType=999`,
				imageUrl: `${share.imageUrl}`
			}
		},
	}
</script>

<style>
	page {
		background-color: #f5f5f5;
	}
</style>
<style scoped lang="scss">
	.content {
		width: 100%;
		height: 100vh;
	}

	.Search {
		width: 400rpx;
		height: 60rpx;
		border-radius: 30rpx;
		padding: 0 20rpx;
		background-color: #f6f6f6;
	}

	.position {
		height: 120rpx;
	}

	.way {
		width: 180rpx;
		height: 56rpx;
		background-color: #f6f6f6;
		border-radius: 26rpx;
		overflow: hidden;
	}

	.wayList {
		height: 100%;
		color: #333333;
		font-size: 24rpx;
		border-radius: 26rpx;
	}

	.scrollView {
		width: 100%;
		margin-top: 20rpx;
	}

	.active {
		color: #ffffff;
		background-color: var(--color);
	}

	.Left {
		width: 150rpx;
		overflow: hidden;
	}

	.leftList {
		width: 100%;
		height: 70rpx;
		color: #666666;
		font-size: 26rpx;
		line-height: 70rpx;
		padding-left: 20rpx;
		margin-top: 10rpx;
		overflow: hidden;
		text-overflow: ellipsis;
		display: -webkit-box;
		-webkit-line-clamp: 1;
		-webkit-box-orient: vertical;
	}

	.navActive {
		background-color: #e5e5e5;
		border-radius: 0 35rpx 35rpx 0;
		font-weight: bold;
		color: #333333;
		position: relative;
	}

	.navActive::after {
		content: '';
		width: 26rpx;
		height: 26rpx;
		border-radius: 50%;
		background-color: var(--color);
		position: absolute;
		left: -18rpx;
		top: 50%;
		transform: translate(0, -50%);
	}

	.RightScrill {
		border-radius: 20rpx 20rpx 0 0;
		overflow: hidden;
		box-sizing: border-box;
	}

	.RightData {
		width: 100%;
		background-color: #ffffff;
		border-radius: 20rpx 20rpx 0 0;
		overflow: hidden;
		margin-bottom: 20rpx;
	}

	.Right_Top_bg {
		width:100%;
		border-radius: 20rpx 20rpx 0 0;
		overflow: hidden;
	}

	.list {
		width: 100%;
		padding-bottom: 30rpx;
		display: flex;
	}

	.list:last-child {
		padding-bottom: 10rpx;
	}

	.shop_img {
		width: 120rpx;
		height: 120rpx;
	}
	.currentNum{
		width:32rpx;
		height: 32rpx;
		background-color: #ffffff;
		position: absolute;
		border-radius: 50%;
		top:-20rpx;
		right:-10rpx;
	}
	.cemterBg{
		width:28rpx;
		height: 28rpx;
		border-radius: 50%;
		background-color: var(--color_val);
	}
	.centerNums{
		font-size:20rpx;
		color:#ffffff;
		zoom:0.9;
	}
	.icon-zengjia {
		color: var(--color)
	}

	.CartView {
		width: 690rpx;
		height: 86rpx;
		background-color: #ffffff;
		border-radius: 43rpx;
		overflow: hidden;
		padding-left: 30rpx;
		position: absolute;
		left: 30rpx;
		bottom: 30rpx;
		z-index: 300;
		display: flex;
		align-items: center;
		box-shadow: 0rpx 6rpx 20rpx #fee0e3;
	}

	.Cartnum {
		width: 30rpx;
		height: 30rpx;
		background-color: var(--color);
		display: flex;
		align-items: center;
		justify-content: center;
		border-radius: 50%;
		position: absolute;
		top: -12rpx;
		right: -12rpx;
	}

	.cartNum {
		zoom: 0.8;
	}

	.Settle {
		height: 100%;
		padding: 0 40rpx;
		color: #ffffff;
		font-size: 26rpx;
		background: linear-gradient(305deg, #FB1D61 0%, #FC707E 100%);
	}
	.Settleyes{
		background: linear-gradient(305deg, #FB1D61 0%, #FC707E 100%);
	}
	.Settleno{
		background: #B3B3B3;
	}

	.Controls {
		width: 100%;
		height: 100%;
		background-color: rgba(0, 0, 0, 0.2);
		position: absolute;
		top: 0;
		left: 0;
		z-index: 200;
		
	}

	.ControView {
		width: 100%;

		background-color: #ffffff;
		border-radius: 10rpx 10rpx 0 0;
		padding-bottom: 120rpx;
	}

	.swipe-action {
		max-height: 50vh;
		overflow-x: hidden;
		overflow-y: auto;
	}

	.shopBOX {
		max-height: 700rpx;
		overflow-x: scroll;
	}

	.dot {
		width: 34rpx;
		height: 34rpx;
		border: 1px solid #999999;
		border-radius: 50%;
	}

	.dotActive {
		background-color: #FE2E66;
		border: 1px solid #FE2E66;
	}

	.liContent {
		width: 600rpx;
	}

	.shop_img_li {
		width: 100rpx;
		height: 100rpx;
	}

	.CatNumber {
		width: 70rpx;
		text-align: center;
		color: #333333;
		font-size: 24rpx;
		font-weight: bold;
	}

	.botBox {
		height: 160rpx;
		color: #999999;
		font-size: 20rpx;
		text-align: center;
	}
</style>